<template>
    <el-card shadow="never" class="border-0">
      <div class="my-page">
        <!-- 按钮区域 -->
        <div class="button-group" style="text-align: right;">
          <el-button type="primary" @click="saveInfo">保存</el-button>
          <el-button type="success" @click="publishOrPause">{{ mptoiceInfo.status==0 ? '发布':'暂停' }}</el-button>
        </div>

        <!-- 文本域 -->
        <el-form-item label="公告栏内容："  style="margin-top: 20px;">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            v-model="mptoiceInfo.content"
          ></el-input>
        </el-form-item>
      </div>
    </el-card>
  </template>
  <script setup>
  import { reactive, ref, onMounted, computed } from "vue"
  import { toast } from '~/composables/utils'
  import {
    updateContent,
    getContent,
    updateStatus
  } from "~/api/noticeBoard.js"

  const mptoiceInfo = ref({
    content: '',
    status: 1,
  })


  const getNoticeInfo = () => {
    getContent().then((res) => {
      mptoiceInfo.value = res
    })
  }

  //保存
  const saveInfo = () => {
    updateContent(mptoiceInfo.value.content).then((res) => {
      toast("保存成功")
      getNoticeInfo()
    })
  }
  //发布或者暂停
  const publishOrPause = () => {
    const myStation = mptoiceInfo.value.status == 0 ? 1 : 0;
    console.log(myStation)
    updateStatus(myStation).then((res) => {
      mptoiceInfo.value.status = myStation
    })
  }
 

onMounted(async () => {
  try {
    getNoticeInfo()
  } catch (error) {
    console.error(error);
  }
});
</script>